<template>
  <div>
    <a-row :gutter="12">
      <a-col :span="8">
        <Card>
          <template #content>
            <ant-tree
              :treeData="treeData"
              :action="true"
              :checkAll="false"
              DeleteSingle
              @Delete="Delete"
              :AddLevel="false"
              @AddChild="AddChild"
              @SelectTree="SelectTree"
            />
          </template>
        </Card>
      </a-col>
      <a-col :span="16">
        <Card>
          <template #content>
            <a-tabs defaultActiveKey="1" @change="callback">
              <a-tab-pane tab="详情" key="1">
                <auth-details />
              </a-tab-pane>
              <a-tab-pane tab="权限分配" key="2">
                <auth-allocation />
              </a-tab-pane>
              <a-tab-pane tab="人员查看" key="3">
                <personnel />
              </a-tab-pane>
            </a-tabs>
          </template>
        </Card>
      </a-col>
    </a-row>
    <!-- 弹出的添加选项 -->
    <open-drawer
      ref="OpenDrawer"
      v-if="visible"
      :childTitle="childTitle"
      :visible="visible"
      :title="title"
      @onClose="onClose"
      @Submit="Submit"
    />
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
const Card = () =>
  import("../../../components/Card.vue").then(m => m.default || m);
const OpenDrawer = () => import("./OpenDrawer.vue").then(m => m.default || m);
const AuthDetails = () => import("./AuthDetails.vue").then(m => m.default || m);
const AuthAllocation = () =>
  import("./AuthAllocation.vue").then(m => m.default || m);
const Personnel = () => import("./Personnel.vue").then(m => m.default || m);
@Component({
  name: "sys-authority",
  layout: "menu",
  components: {
    Card,
    OpenDrawer,
    AuthDetails,
    AuthAllocation,
    Personnel
  }
})
export default class SysAuthority extends Vue {
  childTitle: string = "";
  title: string = "添加";
  LoadingHide: Function = () => {};
  visible: boolean = false;
  treeData: any[] = [
    //首页
    {
      path: "/LeaveHome",
      name: "LeaveHome",
      title: {
        zh: "首页",
        mn: "ᠺᠠᠷᠳ ᠤ ᠨᠡᠷ᠎ᠡ",
        en: ""
      },
      key: "32",
      authentication: "LeaveHome"
    },
    //请假系统设置
    {
      path: "/LeaveSystemSetting",
      name: "LeaveSystemSetting",
      title: {
        zh: "请假系统设置",
        mn: "ᠺᠠᠷᠳ ᠤ ᠨᠡᠷ᠎ᠡ",
        en: ""
      },
      key: "33",
      authentication: "LeaveSystemSetting",
      children: [
        //请假细则设置
        {
          path: "LeaveLeaveRules",
          title: {
            zh: "请假细则设置",
            mn: "ᠺᠠᠷᠳ ᠤ ᠨᠡᠷ᠎ᠡ",
            en: ""
          },
          key: "34",
          authentication: "LeaveLeaveRules",
          name: "LeaveLeaveRules",
          children: [
            {
              path: "LeaveLeaveRules1",
              title: {
                zh: "请假细则设置111111",
                mn: "ᠺᠠᠷᠳ ᠤ ᠨᠡᠷ᠎ᠡ",
                en: ""
              },
              key: "34111",
              authentication: "LeaveLeaveRule111s",
              name: "LeaveLeaveRules11"
            }
          ]
        }
      ]
    }
  ];
  AddChild(n: string[], title: string) {
    this.title = "添加";
    this.childTitle = title;
    this.visible = true;
    console.log("添加子级", n);
  }
  callback(n: string) {
    console.log(n);
  }
  onClose() {
    this.visible = false;
  }
  Submit(options: object) {
    const _this: any = this;
    const form: any = _this.$refs.OpenDrawer.form;
    form.validateFields((err, values) => {
      if (err) {
        return;
      } else {
        console.log("values", values);
        values.title = options;
        this.visible = false;
      }
    });
  }
  Delete(n: string[]) {
    console.log("删除的选项", n);
  }
  SelectTree(n: string[]) {
    const _this: any = this;
    this.LoadingHide = _this.$message.loading("数据加载中...", 0);
    setTimeout(() => {
      _this.LoadingHide();
    }, 1000);
    console.log("选择的值", n);
  }
}
</script>